<script src="/js/vue.js"></script>

<div class="col-sm-3 col-12" style="padding: 0 10px;">
    <div class="col-12 search-bar form-group row">
        <div class="col-8">
            <input type="text" class="form-control" id="keyword" placeholder="请输入关键字" onkeyup="doSearch(event)" />
        </div>
        <div class="col-4" style="text-align:right;">
            <button type="button" class="btn btn-primary" onclick="doSearch(null)">搜索</button>
        </div>
    </div>

    <div class="col-12 side">
        <div class="tip"  style="text-align: center;" >最新文章</div>
        <ul id="last">
            {% for row in last_articles %}
            <!-- <li> <a href="/article/{{row.article}}">{{loop.index}}.{{row.headline|truncate(12)}}</a></li> -->
            <li> <a href="/article/{{row.articleid}}">{{loop.index}}.{{row.headline|truncate(24)}}</a></li>
            {% endfor %}
        </ul>
    </div>

    <div class="col-12 side">
        <div  style="text-align: center;" class="tip">最多阅读</div>
        <ul id="most">
            <!-- <li v-for="(article, index) in most_articles">
                <a :href="'/article/' + article[0]">${index+1}. ${article[1].substr(0,15)}...</a>
            </li> -->
            {% for row in most_articles %}
            <!--<li> <a href="/article/{{row.article}}">{{loop.index}}.{{row.headline|truncate(12)}}</a></li> -->
            <li> <a href="/article/{{row.articleid}}">{{loop.index}}.{{row.headline|truncate(24)}}</a></li>
            {% endfor %}
        </ul>
    </div>

{#    <div class="col-12 side" id="fixedmenu">#}
{#        <div class="tip"  style="text-align: center;" >特别推荐</div>#}
{#        <ul id="recommended">#}
{#            <!-- <li v-for="(article, index) in recommended_articles">#}
{#                <a v-bind:href="'/article/' + article[0]">${index+1}. ${article[1].substr(0,15)}...</a>#}
{#            </li> -->#}
{#            {% for row in recommended_articles %}#}
{#            <!-- <li> <a href="/article/{{row.article}}">{{loop.index}}.{{row.headline|truncate(12)}}</a></li> -->#}
{#            <li> <a href="/article/{{row[0]}}">{{loop.index}}.{{row[1]|truncate(24)}}</a></li>#}
{#            {% endfor %}#}
{#        </ul>#}
{#        <div class="col-12 side" onclick="gotoTop()" style="height: 40px; text-align: center; cursor: pointer">#}
{#            回到顶部#}
{#        </div>#}
{#    </div>#}

{#    <div class="col-12 side">#}
{#        <div class="tip"  style="text-align: center;">人生时间</div>#}
{#        <p  style="text-align: center;">  天     :  {{ "{:.0f}".format(can_use_minute/1400) }}  </p>#}
{#        <p  style="text-align: center;"> 小时    :  {{ "{:.0f}".format(can_use_minute/60) }} </p>#}
{#        <p  style="text-align: center;"> 分钟    :  {{"{:.0f}".format(can_use_minute)}} </p>#}
{#        <p  style="text-align: center;"> 秒      :    {{"{:.0f}".format(can_use_minute*60)}} </p>#}
{#    </div>#}

</div>

<script type="text/javascript">
    function doSearch(e) {
        if (e != null && e.keyCode != 13) {
            return false;
        }

        let keyword = $.trim($("#keyword").val());
        if (keyword.length === 0 || keyword.length > 10 || keyword.indexOf('%')>=0 ) {
            bootbox.alert({'title':'错误提示', 'message':"你输入的关键字不合法"});
            $("#keyword").focus();
            return false;
        }
        location.href = '/search/1-' + keyword;
    }

    // 利用JS来截取字符串，中文1个，英文0.5个。
    function truncate(headline, length) {
        let count = 0;
        let output = '';
        for (let i in headline) {
            output += headline.charAt(i);
            let code = headline.charCodeAt(i);
            if (code <= 128) {
                count += 0.5;
            }
            else {
                count += 1;
            }
            if (count > length) {
                break;
            }
        }
        return output + '...';
    }

    // 在jQuery中表示文档加载完成后开始执行（不需要按钮或事件触发），window.load=function() {}
    $(document).ready(function () {
        // 第一步：发送Ajax请求去访问/recommend接口，获取JSON
        $.get('/recommend', function (data) {
            // 获取响应并动态填充到对应的推荐栏中
            let lastData = data[0];
            let mostData = data[1];
            let recommendedData = data[2];

            let v1 = new Vue({
                el: '#last',
                data: {content: lastData},
                delimiters: ['${', '}']
            });

            let v2 = new Vue({
                el: '#most',
                data: {content: mostData},
                delimiters: ['${', '}']
            });

            let v3 = new Vue({
                el: '#recommended',
                data: {content: recommendedData},
                delimiters: ['${', '}']
            });
        })
    });

    $(document).ready(function(){
        // 利用浏览器的user-agent属性判断浏览器类型
        let userAgentInfo = navigator.userAgent.toLowerCase();
        let agents = ["android", "iphone", "symbianOS", "windows phone", "ipad", "ipod"];
        let flag = true;    // 表示是PC端
        for (let v = 0; v < agents.length; v++) {
            if (userAgentInfo.indexOf(agents[v]) >= 0) {
                flag = false;   // 表示这是移动端
                break;
            }
        }

        // 是PC端时才进行右侧停靠
        if (flag === true) {
            let fixedDiv = document.getElementById("fixedmenu");
            let H = 0;
            let Y = fixedDiv;
            while (Y) {
                H += Y.offsetTop;
                Y = Y.offsetParent;
            }

            window.onscroll = function () {
                let s = document.body.scrollTop || document.documentElement.scrollTop;
                if (s > H + 500) {
                    fixedDiv.style = "position:fixed; top:0; margin-top:0; width: 306px;";
                } else {
                    fixedDiv.style = "";
                }
            }
        }
    });

    function gotoTop() {
        $('html, body').animate({scrollTop: 0}, 800);
        return false;
    }

</script>